@layer components {
    [is-~='badge'] {
        color: var(--badge-text);
        background-image: linear-gradient(
            90deg,
            transparent 0,
            transparent calc(1ch - 1px),
            var(--badge-color) calc(1ch - 1px),
            var(--badge-color) calc(100% - 1ch + 1px),
            transparent calc(100% - 1ch + 1px),
            transparent
        );
        display: inline-flex;
        vertical-align: top;
        white-space: nowrap;
        height: 1lh;
        line-height: 1lh;

        /* Color Variants */
        &[variant-='foreground0'],
        &:not([variant-]) {
            --badge-color: var(--foreground0);
            --badge-text: var(--background0);
        }

        &[variant-='foreground1'] {
            --badge-color: var(--foreground1);
            --badge-text: var(--background0);
        }

        &[variant-='foreground2'] {
            --badge-color: var(--foreground2);
            --badge-text: var(--background0);
        }

        &[variant-='background0'] {
            --badge-color: var(--background0);
            --badge-text: var(--foreground0);
        }

        &[variant-='background1'] {
            --badge-color: var(--background1);
            --badge-text: var(--foreground0);
        }

        &[variant-='background2'] {
            --badge-color: var(--background2);
            --badge-text: var(--foreground0);
        }

        &[variant-='background3'] {
            --badge-color: var(--background3);
            --badge-text: var(--foreground0);
        }

        &::before,
        &::after {
            content: '';
            width: 1ch;
            height: 1lh;
            display: inline-block;
            vertical-align: middle;
            background-color: var(--badge-color);
            overflow: hidden;
        }

        /* Cap Styles */
        &[cap-^='round']::before {
            border-top-left-radius: 1lh;
            border-bottom-left-radius: 1lh;
        }

        &[cap-$='round']::after {
            border-top-right-radius: 1lh;
            border-bottom-right-radius: 1lh;
        }

        &[cap-^='triangle']::before {
            clip-path: polygon(100% 0, 100% 100%, 0 50%);
        }

        &[cap-$='triangle']::after {
            clip-path: polygon(0 0, 0 100%, 100% 50%);
        }

        &[cap-^='slant-top']::before {
            clip-path: polygon(0 0, 100% 0, 100% 100%);
        }

        &[cap-$='slant-top']::after {
            clip-path: polygon(0 0, 100% 0, 0 100%);
        }

        &[cap-^='slant-bottom']::before {
            clip-path: polygon(100% 0, 100% 100%, 0 100%);
        }

        &[cap-$='slant-bottom']::after {
            clip-path: polygon(0 0, 100% 100%, 0 100%);
        }

        &[cap-^='ribbon']::before {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 50%);
        }

        &[cap-$='ribbon']::after {
            clip-path: polygon(0 0, 100% 0, 0% 50%, 100% 100%, 0% 100%);
        }
    }
}
